import React, { Component } from 'react'
import { Checkbox, Button, Popconfirm } from 'antd'
export default class Footer extends Component {
    render() {
        const { todos, checkAllTodos, deleteAllDoneTodos } = this.props
        const totalCount = todos.length;
        const doneConut = todos.reduce((pre, current) => pre + (current.done ? 1 : 0), 0)
        return (
            <div style={{ display: 'flex', alignItems: "center" }}>
                <Checkbox
                    style={{ display: 'flex', flex: "1" }}
                    onChange={(event => {
                        checkAllTodos(event.target.checked)
                    })}
                    checked={doneConut === totalCount && totalCount !== 0}>
                    已完成{doneConut}/全部{totalCount}
                </Checkbox>
                <Button type="primary"
                    danger className='delete-button'
                >
                    <Popconfirm
                        title="确认删除所有完成的任务么？"
                        onConfirm={() => deleteAllDoneTodos()}
                        okText="确认"
                        cancelText="取消"
                    >
                        删除已完成的任务
                    </Popconfirm>
                </Button>
            </div>
        )
    }
}
